
import {useState,useRef,useCallback,useMemo,useEffect} from "react"

const nameList = ['apple', 'peer', 'banana', 'lemon']
export const  HooksFive=(props)=>{
  const [price,setPrice] = useState(10);
  const [name,setName] = useState("apple")

   // 只对name响应
   useEffect(() => {
        console.log('name effect 触发')
        getProductName()
    }, [name])

  // 只对price响应
  useEffect(() => {
      console.log('price effect 触发')
  }, [price])


  function getProductName(){
    console.log("getProductName 触发")
    return name;
  }

  const memo_name = useMemo(()=>{
    console.log('name memo 触发')
    return ()=>name;   // 返回一个函数 
  },[name])

  return (
    <div>
      <h2> useCallback  VS   useMemo   </h2>
      <p>
        {name}
      </p>
      <p>
        {price}
      </p>
      <p>
        普通的名字 : { getProductName() }
      </p>
      <p>
        memo 化的名字 : { memo_name() }
      </p>
      <button onClick={() => setPrice(price+1)}>价钱+1</button>
      <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
    </div>
  )
}



//  useCallback  VS   useMemo  
//  useMemo是在DOM更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUpdate

//  使用useMemo可以帮助我们优化性能，让react没必要执行不必要的函数
//  由于复杂数据类型的地址可能发生改变，于是传递给子组件的props也会发生变化，这样还是会执行不必要的函数，所以就用到了useMemo这个api
//  useCallback是useMemo的语法糖
//  useMemo > useCallback 